<template>
	<view>
		<view class="u-p-20">
			<view class="u-b-r-16" style="background-color:#ffffff;padding: 30rpx 20rpx;">
				<view class="u-weight">贡献值进度:</view>
		
				<view class="u-flex u-m-t-20">
		
					<view class="u-w-500 u-m-l-20">
						<u-line-progress active-color="#FF5502" :percent="(info.all_conval/info.con_val).toFixed(2)*100"></u-line-progress>
					</view>
				</view>
				<view class="u-flex u-m-t-20">
					<view class="">所需贡献值:</view>
					<view class="" style="color: #FF5502;">{{info.con_val}}</view>
				</view>
				<view class="u-flex u-font-20 u-m-t-20">
					
					<view class="u-flex ">
						<view class="">已累计贡献值:</view>
						<view class="" style="color: #FF5502;">{{info.all_conval || 0}}</view>
					</view>
					<view class="u-flex u-m-l-20">
						<view class="">剩余贡献值:</view>
						<view class="" style="color: #FF5502;">{{(info.con_val-info.all_conval).toFixed(2)}}</view>
					</view>
				</view>
		
				<view class="u-m-t-20" v-if="info&&info.item">
					<view class="" style="color: #1C1C1C;">订单：{{info.order_sn}}</view>
					<view class="u-m-t-20  " v-for="(item,index) in info.item" :key="index">
						<view class="u-flex u-row-between">
							<view class="u-flex">
								<view class="">
									<u-image :src='item.imgs[0]' width='183rpx' height='183rpx'></u-image>
								</view>
								<view class="u-p-l-10 u-h-184">
									<view class="u-weight">{{item.goods_name}}</view>
									<!-- <view class="u-weight u-p-t-10">可口30克*12枚</view> -->
									<view class="u-font-20 u-m-t-10">
										{{item.spece_content}}
									</view>
									<view class=" u-p-t-10" style="color: #FC3533;">￥{{info.total_amount}}</view>
								</view>
							
							</view>
							<view class="u-font-20" style="color:#454545;">{{item.num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-20">
			<view v-if="list.length>0" class="bg_FFFFFF u-b-r-20">
				<view class="u-flex u-row-between u-font-20 u-p-20" v-for="(item,indexs) in list" :key="indexs">
					<view class="u-weight">{{item.remark}}</view>
					<view class="" style="color: #898989;"> {{item.create_time}}</view>
					<view class="u-weight" style="color: #FC3533;">+{{item.val}}</view>
				</view>
			</view>
			<view class="u-p-20">
				<u-loadmore :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					page_size: 20,
					order_sn:''
				},
				list:[],
				// 加载更多参数
				status: 'loadmore',
			}
		},
		onShow() {
			this.info=uni.getStorageSync('winList')
			this.params.order_sn=this.info.order_sn
			this.clear()
			this.get_con_val_list()
		},
		// 下拉到底事件
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.get_con_val_list()
		},
		methods: {
			clear() {
				this.params.page = 1
				this.list = []
			},
			get_con_val_list(){				
				this.$api.get_con_val_list(this.params, res => {
					if (res.data.code == 1) {
						if (res.data.data.data.length < 20) {
							this.status = "nomore"
						} else {
							this.params.page = this.params.page + 1
							this.status = "loadmore"
						}
						this.list = this.list.concat(res.data.data.data)
						uni.stopPullDownRefresh();
					}
				})
			}
			
		}
	}
</script>

<style scoped>
	page {
		background-color: #f5f5f5;
	}
</style>
